<template>
  <div>
    <h1>测试逻辑演示</h1>

    <el-button>{{ t('cart') }}</el-button>
    <el-select v-model="locale">
      <el-option label="中文" value="zh" />
      <el-option label="英文" value="en" />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前语言区域设定
      locale: 'zh',
      messages: {
        // 多少语言就要准备多少套
        zh: {
          // 字典中应该是 key:value 的形式对应标志和翻译

          cart: '购物车'
        },
        en: {

          cart: 'shopping cart'
        }
      }
    }
  },
  created() {
    console.log(this.$t)
  },
  methods: {
    // 翻译函数, 通过输入一个标记, 可以根据当前语言设定找出对应的翻译语句
    t(str) {
      // 根据当前的 locale 语言区域设定, 找出语言翻译字典包
      // 根据传入的标记找到对应的翻译输出
      const dict = this.messages[this.locale]

      const res = dict[str]

      return res
    }
  }
}
</script>

<style>

</style>
